<template>
	<view class="car-card">
		<view class="car-card-content" v-for="(item,index) in carList" :key="index" @click='goCarDetail(item.carId)'>
			<!-- 图片 -->
			<view class="img-content">
				<view class="img">
					<u-lazy-load :image="item.carImg + '!idx'"></u-lazy-load>
				</view>
			</view>
			<!-- 内容，标题价格 -->
			<view class="text-content">
				<view class="title">
					{{item.carName}}
				</view>
				<view class="sale-price">
					{{item.carPrice}}
				</view>
				<view class="price">
					{{item.carFactoryPrice}}/{{item.rangePrice}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			carList: {
				type: Array,
				default: function() {
					return [];
				},
			}
		},
		data() {
			return {
			}
		},
		methods: {
			goCarDetail(e){
			  console.log(e)
			  uni.navigateTo({
				  url: '../../pages_carSource/productDetail/productDetail?goodsid='+e,
			  })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.car-card {
		margin-bottom: 30rpx;
	}

	.car-card-content {
		padding: 10rpx 0rpx;
		border-bottom: 2rpx solid #EEEEEE;
		background: #fff;
		border-radius: 5rpx;
		display: flex;

		.img-content {
			padding: 2%;
			flex-direction: column;

			.img {
				width: 220rpx;
				height: 147rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.text-content {
			padding: 2%;
			flex-direction: column;

			.title {
				color: #343434;
				font-weight: bold;
				font-size: 30rpx;
			}

			.sale-price {
				color: #EB5C02;
				font-size: 34rpx;
				padding: 6rpx 0px;
			}

			.price {
				color: #666666;
				font-size: 26rpx;
			}
		}

	}
</style>
